<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <div class="btn-are">
            <el-button type="primary" icon="el-icon-plus" @click="withdraw">申请提现</el-button>
            <div style="margin-right: 20px">总金额：<span class="total">{{totalPrice}}</span>元</div>
        </div>
        <incomeTab :tableData="tableData"></incomeTab>
        <paginationAre :total="total" @currentChange="currentChange"></paginationAre>
    </div>
</template>

<script>
    import breadcrumb from '@/components/breadcrumb.vue'
    import incomeTab from '@/components/income/incomeTable.vue'
    import paginationAre from '@/components/paginationAre.vue'
    export default {
        name: "incomeList",
        components:{breadcrumb,incomeTab,paginationAre},
        data() {
            return {
                routerList: [
                    {
                        path: '',
                        name: '财务管理'
                    },
                    {
                        path: '/income',
                        name: '收入列表'
                    },
                ],
                page:1,
                tableData:[],
                total:0,
                totalPrice:0
            }
        },
        created(){
            this.getIncomeList();
            this.getTotalPrice();
        },
        methods:{
            withdraw(){
                // this.$router.push({path:'/withdraw'})
                this.$prompt('请输入提现金额', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/,
                    inputErrorMessage: '请正确输入金额，金额最多到小数点后两位'
                }).then(({ value }) => {
                    if(value>this.totalPrice){
                        this.$message({
                            type: 'warning',
                            message: '提现金额超出账户金额，请重新申请！'
                        });
                        return false
                    }
                    this.setWithdraw(value)

                }).catch(() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '取消输入'
                        // });
                    },)
            },
            async setWithdraw(price){
                console.log(price);
                console.log(this.$store.state.supplier_id);
                let res = await this.$Http.withdraw({
                    supplier_id: this.$store.state.supplier_id,
                    price:price
                })
                console.log(res);
                if(res.code == 200){
                    this.$message.info('提现申请已提交，请耐心等待！！！')
                    this.getIncomeList();
                    this.getTotalPrice()
                }
            },
            async getIncomeList(){
                let res = await this.$Http.icomeList({
                    supplier_id:this.$store.state.supplier_id,
                    p:this.page,
                    num:this.$store.state.pageNum
                })
                // console.log(res);
                this.tableData = res.list;
                this.total = Number(res.count);
            },
            async getTotalPrice(){
                let res = await this.$Http.getSupplierInfo({
                    id:this.$store.state.supplier_id
                })
                // console.log(res);
                if(res){
                    this.totalPrice = res.supplier_price
                }
            },
            currentChange(value){
                this.page = value
                console.log(this.page);
                this.getIncomeList()
            }
        }
    }
</script>

<style scoped>
    .btn-are{
        margin: 20px 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
    }
    .total{
        color:#409eff;
        font-weight: bold;
        font-size: 26px;
        margin: 0 5px;
    }
</style>
